<template>
  <div class="  container">
    <router-view></router-view>
    <div class="index">
      <Header  :isShowMyCourse="true"/>
      <div class="main-center2 " style="height: auto; margin-bottom:  0px;">
        <div class="train-con">
          <div class="train-con-list">
            <div class="t-tit"><h3>支付</h3></div>

            <div class="  study-c-info">
              <img class="pic" :src="classInfo.image" />
              <div class="info-txt">
                <h3>{{ classInfo.name }}</h3>

                <p>{{ classInfo.paynumber }}次学习 | 有效期：{{ classInfo.validity }}</p>
                <p class="m-act">
                  <label class="fl price">
                    <b>￥</b>
                    {{ classInfo.price }}
                  </label>
                </p>
              </div>
            </div>

            <div class="clear"></div>
            <h3 class="mulu">选择支付方式</h3>
            <ul class="pay-list">
              <li :class="{ cur: current == 0 }" @click="changePay(0)">
                <img src="static/img/wxpay.png" class="pic" />
                <label>微信</label>
              </li>
              <li :class="{ cur: current == 1 }" @click="changePay(1)">
                <img src="static/img/alipay.png" class="pic" />
                <label>支付宝</label>
              </li>
            </ul>

            <div class="  pay-detail">
              实际支付金额：
              <label class="price">
                <b>￥</b>
                {{ classInfo.price }}
              </label>
            </div>
            <div class="clear"></div>
            <div class="mt30  " @click="goNext()"><el-button>确认支付</el-button></div>

            <div class="mt30"></div>
          </div>
        </div>

       <div class="r-xcx" ><span class="sp">微信小程序</span>
      <div class="r-xcx2" >
        <h3>培训平台小程序</h3>
        <img width="169" style="margin-top: 26px;" src="/static/img/qr.png" />
      </div>
    </div>
      </div>
    </div>

    <div class="maskBg"  v-if="isPay == true"></div>
    <div class="commDig pay-area" v-if="isPay == true">
      <div class="title">
        <span>微信支付</span>
        <span class="closed" @click="isPay = false"><img src="static/img/closed.png" /></span>
      </div>
      <div class="cont">
        <p>交易号：{{order_no}}</p>
        <p>交易时间：{{createtime}}</p>
      <!--  <p>请您在2小时内支付，否则二维码将失效。</p> -->
        <h3>支付金额￥{{price}}，请使用微信扫描下方二维码完成支付</h3>
        <img :src="payImg" class="ewm" /></div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header_train.vue';
import Copyright from '../../components/copyright2.vue';

export default {
  data() {
    return {
      payImg: '',
      isPay: false,
      isOpen: true,
      classInfo: '', //获取课程信息
      id: '', //课程id
      current: 0, //0微信支付，1支付宝支付
      token: localStorage.getItem('token'),
      clearSetTime: '',
      price:'',//价格
      createtime:'',//时间
      order_no:'',//订单号

    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getClassInfo();
    if (this.$route.query.status) this.$router.go(-3);
  },
  watch: {
    //监听路由变化
    $route(newData) {
      console.log(newData);
    }
  },
  beforeDestroy() {
    clearInterval(this.clearSetTime)
  },
  methods: {
    getClassInfo() {
      this.$api('getCourseList.courseinfo', { token: this.token, id: this.id }).then(res => {
        this.classInfo = res.data;
      });
    },
    changePay(current) {
      this.current = current;
    },
    goNext() {
      let formData = {
        token: this.token,
        id: this.id,
        type: this.current == 0 ? 'wechat' : 'alipay',
        method: this.current == 0 ? 'scan' : 'web'
      };
      this.$api('getCourseList.payorder', formData).then(res => {
        if (this.current == 0) {
          this.payImg = res.data.image;
          this.price=res.data.price
          this.order_no=res.data.order_no
          this.createtime=res.data.createtime
          console.log(this.payImg);
          this.isPay = true;
          this.selectOrderStatus();
        } else {
          const div = document.createElement('div');
          div.innerHTML = res.data;
          document.body.appendChild(div);
          document.forms[0].submit(); //重要，这个才是点击跳页面的核心
          // this.$router.replace('/trainDetail?id=' + this.id);
          this.$router.go(-1);
        }
      });
    },
    //查询订单状态
    selectOrderStatus() {
      const that = this;
      this.clearSetTime = setInterval(async () => {
        let res = await this.$api('getCourseList.checkorder', { token: this.token, order_no: this.order_no });
        if (res.data.payswith == 1) {
          this.isPay = false;
          this.$message({
            message: '支付成功',
            type: 'success'
          });
          clearInterval(this.clearSetTime);
          this.$router.go(-1);
        }
        if (this.isPay == false) {
          clearInterval(this.clearSetTime);
        }
      }, 1000);
    }
  },
  components: { Header, Copyright }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
